import { Button, Form, Input, Select, Tree } from "antd";
import { Component, createRef } from "react";
import { mainRoutes } from "../../../router";
import { rolePost, rolePut } from "../../../api/user";
const { Option } = Select;
const layout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 16,
  },
};
const tailLayout = {
  wrapperCol: {
    offset: 8,
    span: 16,
  },
};

class RoleForm extends Component {
  formRef = createRef();
  state = {
    checkedArr: [],
  };
  onFinish = async (values) => {
    console.log(values);
    let { roleData, handleUpdate } = this.props;
    let id;
    if (roleData) {
      await rolePut(roleData.objectId, values); //编辑
      id = roleData.objectId;
    } else {
      let res = await rolePost(values); //新增
      id = res.data.objectId;
    }
    handleUpdate(id, values);
  };
  onReset = () => {
    this.formRef.current.resetFields();
  };
  onCheck = (checkedKeys) => {
    console.log(checkedKeys, this.formRef.current);
    //使用Form表单组提供的内置方法，动态为表单设置值
    this.formRef.current.setFieldsValue({
      permission: checkedKeys,
    });
    this.setState({
      checkedArr: checkedKeys, //保证Tree受控的情况下，依旧可以勾选
    });
  };
  componentDidMount() {
    // console.log("role-form的update");
    let { roleData } = this.props;
    if (roleData) {
      this.formRef.current.setFieldsValue(roleData);
      this.setState({
        checkedArr: roleData.permission, //初始化默认勾选效果
      });
    }
  }
  render() {
    // console.log(this.props.roleData);
    let { roleData } = this.props;
    return (
      <Form
        {...layout}
        name="control-hooks"
        ref={this.formRef}
        onFinish={this.onFinish}
        style={{
          maxWidth: 600,
        }}
      >
        <Form.Item
          name="name"
          label="角色名称"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="permission"
          label="角色权限"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Tree
            checkable
            onCheck={this.onCheck}
            treeData={mainRoutes}
            fieldNames={{ title: "label" }}
            checkedKeys={this.state.checkedArr}
          />
        </Form.Item>
        <Form.Item
          noStyle
          shouldUpdate={(prevValues, currentValues) =>
            prevValues.gender !== currentValues.gender
          }
        >
          {({ getFieldValue }) =>
            getFieldValue("gender") === "other" ? (
              <Form.Item
                name="customizeGender"
                label="Customize Gender"
                rules={[
                  {
                    required: true,
                  },
                ]}
              >
                <Input />
              </Form.Item>
            ) : null
          }
        </Form.Item>
        <Form.Item {...tailLayout}>
          <Button type="primary" htmlType="submit">
            {roleData ? "编辑" : "新增"}
          </Button>
          <Button htmlType="button" onClick={this.onReset}>
            重置
          </Button>
        </Form.Item>
      </Form>
    );
  }
}
export default RoleForm;
